<template>
	<view class="conbox">
		<!-- <button type="default" @click="juo">获取</button> -->
		<view class="container">

			<!-- 背景 -->
			<image src="../../static/img/back.jpg" class="cont" mode="widthFix"></image>
			<image src="../../static/img/caidai.png" class="caidai" mode=""></image>
			<view class="title">

			</view>
			<view class="zi0">
				100%
			</view>
			<view class="zi1">
				幸运抽奖
			</view>
			<view class="zi2">
				礼品送不停
			</view>
			<!-- <uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup> -->
			<u-popup v-model="shows" border-radius="50" mode="bottom">
				<view class="popup">
					<image @click="shows=false" class="image_shut" src="../../static/img/shut.png" mode=""></image>
					<view class="active">
						活动说明
					</view>

					<view class="actives">
						活动奖品
					</view>
					<view class="kuang" v-for="(item,index) in menu">
						<image :src="item.image" mode=""></image>
						<view class="dengji">{{item.awards_name}}</view>
						<view class="neirong">
							{{item.awards_goods_name}}
						</view>
					</view>

					<view class="time_title">
						活动时间
					</view>
					<view class="time">
						{{awards.active_start_time}} 至 {{awards.active_end_time}}
					</view>

					<view class="time_title">
						活动说明
					</view>
					<view class="time">
						{{awards.active_des}}
					</view>

					<view class="time_title">

						主办方信息
					</view>
					<view class="time">
						主办方:{{awards.sponsor_info.sponsor_name}} <br><br>
						联系电话:{{awards.sponsor_info.sponsor_phone}} <br><br>
						微信号:{{awards.sponsor_info.sponsor_wechat}} <br><br>
						地址:{{awards.sponsor_info.sponsor_address}}
					</view>
				</view>
			</u-popup>
			<view class="uni-btn-icon" @tap="backClick"></view>
			<view class="header">
				<view class="rule" @click="shows=true">
					<text>规则</text>
				</view>

				<view class="info">
					<!-- 	<view class="times">
					还可抽奖： <text>{{lotteryTimes}}</text>次
				</view> -->

				</view>

			</view>

			<view class="my-prize" @click="showMyPrizeDialog">
				我的奖品<text class="lg cuIcon-right"></text>
			</view>

			<view class="num">
				累计1{{number}}人参与
			</view>

			<view class="main">
				<view class="canvas-container">
					<canvas class="canvas" canvas-id="canvas"
						:style="'width:'+canvasWidth+'px;height:'+canvasHeight+'px;'"></canvas>
					<image :src="inLottery?'../../static/img/start_disabled.png':'../../static/img/start.png'"
						id="start" @tap="playReward"></image>
				</view>
			</view>

			<view class="mission-list">
				<image class="mission-title" src="../../static/img/mission_title.png" mode="widthFix"></image>
				<view class="title_mission">
					中奖记录
				</view>
				<!-- <view class="title grid col-3">
					<view>内容</view>
					<view>奖励次数</view>
					<view>状态</view>
				</view> -->
				<swiper class="swiper" circular="true" autoplay="true" skip-hidden-item-layout="true" interval="5000"
					duration="0" disable-touch="true" easing-function="linear" vertical="true" @change="change">
					<swiper-item v-for="(res,indexs) in allnum">
						<view class="swiper-item" v-for="(item,index) in menulu">
							<image :src="item.record_head_img" mode=""></image>
							<view class="phone">
								{{item.record_name}}
							</view>
							<view class="jiang">
								{{item.record_awards}}
							</view>
						</view>
					</swiper-item>
				</swiper>

			</view>
		</view>


		<view class="cu-modal" :class="showMyPrize?'show':''" @tap="hideMyPrizeDialog">
			<view class="cu-dialog my-prize-dialog">
				<view class="title">
					我的奖品
				</view>
				<view class="itembox">
					<view class="item" v-for="(items,i) in myPrizelist" :key="i">
						<text class="left">{{items.awardsName}}</text>
						<text class="right">{{items.createTime}}</text>
					</view>
				</view>
				<view class="no-prize" v-if="myPrizelist.length==0 && showNoPrize">
					您还没有获得奖品
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	var turntable = require("../../lib/turntable.js");
	export default {
		data() {
			return {
				awardsList: {},
				lotteryTimes: 0,
				isSignIn: false,
				showMyPrize: false,
				myPrizelist: [],
				showNoPrize: false,
				showRule: false,
				turntable: null,
				canvasWidth: 0,
				canvasHeight: 0,
				inLottery: false,
				shows: false,
				awards: [],
				list: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				menu: [],
				menulu:[],
				page:1,
				allnum:"",
				size:7,
				openid:"",
				number:""
			}
		},
		async onLoad(e) {
			console.log(e);
			uni.setStorageSync("openid",e.openid)
			this.openid=e.openid
			// this.openid="o1eqF5pkTssVWpjTX0Z-N3hEWqes"
			// 获取路由
			console.log(getCurrentPages());
			let pages = getCurrentPages(); //当前页面栈
			let prevPage = pages[pages.length - 1];//当前页面
			// pop() 方法用于删除并返回数组的最后一个元素
			// let prevPage = pages.pop();//当前页面
			console.log( prevPage) //举例：输出为‘pages/index/index’
			// 规则说明
			let result = await this.$http("/getActiveDescription", "get", {}, "")
			console.log(result.data.result);
			this.awards = result.data.result
			result.data.result.awards_list
				.forEach((item, index) => {
					if(index>4){
						item.image = "../../static/img/num"+5+".png"
					}else{
						item.image = "../../static/img/num"+index+".png"
					}
				})
			console.log(result.data.result.awards_list);
			this.menu=result.data.result.awards_list
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.canvasWidth = res.windowWidth - (res.windowWidth / 100 * 10);
					that.canvasHeight = res.windowWidth - (res.windowWidth / 100 * 10);
					// 获取奖品列表
					that.initdata();
				}
			});
			
			// 中奖记录初始化第一页数据
			this.record(this.page)
			// 中奖记录我的奖品
			this.prizelist()
			

		},
		onReady: function(e) {},
		onPullDownRefresh: async function() {
			// 获取奖品列表
			await this.initdata();
			uni.stopPullDownRefresh();
		},
		methods: {
			// async juo(){
			// let res=await this.$http("/prizeList","get",{},"")
			// console.log(res.data.result);	
			// },
			change(e){
				console.log(e.detail.current+1);
				this.page++
				if(this.page>this.allnum){
					this.page=1
				}
				
				console.log(this.page);
				this.record(this.page)
			},
             // // 中奖记录初始化每一页数据
			async record(page){
				 let res=await this.$http("/getAwardsRecord","post", {page,size:this.size}, "")
				 console.log(res.data.result.awardsRecordList);
				 console.log(res.data.result.awardsRecordCount);
				 this.allnum=Math.ceil(res.data.result.awardsRecordCount/this.size) 
				 this.menulu=res.data.result.awardsRecordList
			 },
			 // 奖品列表
			async prizelist(){
				 let res = await this.$http("/getMyPrizeList", "post", {openid:this.openid}, "")
				 console.log(res);
				 res.data.result.forEach((item, index) => {
				 	this.myPrizelist.push({
				 		awardsName: item.record_awards,
				 		createTime: item.record_addtime
				 	})
				 })
				 console.log();
			 },
			// 查看奖品
			async getMyPrize() {
				var that = this
				that.showNoPrize = true;
				// that.$lotteryApi.myPrizeList().then(res => {
				// 	that.myPrizelist = res
				// 	that.showNoPrize = true;
				// }).catch(() => {
				// 	that.showNoPrize = true;
				// });
			
			},

			showRuleDialog() {
				this.showRule = true;
			},
			hideRuleDialog() {
				this.showRule = false;
			},
			showMyPrizeDialog() {
				this.getMyPrize();
				this.showMyPrize = true;
			},
			hideMyPrizeDialog() {
				this.showNoPrize = false;
				this.showMyPrize = false;
				// this.myPrizelist = []
			},
			// 初始化抽奖数据
			async initdata() {
				var that = this;
				let res = await this.$http("/getPrizeList", "get", {}, "")
				console.log(res.data.result);
				this.number=res.data.result.awards_number
				let awardsList = []
				res.data.result.prize_list.forEach((item, index) => {

					if (index % 2 == 0) {
						awardsList.push({
							id: item.prize_id,
							image: item.prize_image,
							name: item.prize_name,
							diskColor: "#fff"
						})
						item.diskColor = "#fff"
					} else {
						item.diskColor = "#FBF0B0"
						awardsList.push({
							id: item.prize_id,
							image: item.prize_image,
							name: item.prize_name,
							diskColor: "#FBF0B0"
						})
					}
				})
				console.log(awardsList);

				// that.$lotteryApi.list().then(res => {
				// console.log(res);
				that.lotteryTimes = 0;
				that.isSignIn = false;
				that.awardsList = awardsList;
				var diskColor = [];

				for (var i = 0; i < that.awardsList.length; i++) {
					diskColor.push(that.awardsList[i].diskColor);
				}

				// 画转盘
				var width = that.canvasWidth;
				var height = width;
				that.turntable = turntable.wheelSurf("canvas", {
					$this: that,
					list: that.awardsList,
					width: width,
					height: height,
					outerCircle: {
						color: '#F95151' // 外圈颜色(可选)
					},
					innerCircle: {
						color: '#B33E0A' // 里圈颜色(可选)
					},
					dots: ["#FBF0B0", "#FFFFFF"], // 装饰点颜色(可选)
					disk: diskColor, //中心奖盘的颜色，默认7彩(可选)
					// disk: ["#FAFAFA","#BCF489","#EFB88E", "#EBE993", "#82E7D4","#19BD9F", "#16B960"], //中心奖盘的颜色，默认7彩(可选)
					// disk: ["#EE904A", "#D3D03D","#8AD049", "#16B960","#19BD9F","#17ABC1", "#EB678D","#F0675D"], //中心奖盘的颜色，默认7彩(可选)
					title: {
						color: '#B14A29',
						font: '13px Arial',
						lineHeight: 13
					}
				});
				// });
			},
			playReward: function() {
				this.lottery(false);
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法
				this.$refs.popup.open()
			},
			//发起抽奖  
			async lottery(integralExchange = false) {
				
				var that = this;
				//正在抽奖则返回
				if (that.inLottery) {
					return;
				}
				setTimeout(()=>{
					this.myPrizelist = []
					this.prizelist()
				},8000)
				console.log(2525);
				that.inLottery = true;
				var angel = 360 / that.awardsList.length;
				// 获取奖品
				// that.$lotteryApi.lottery(integralExchange).then(res => {
				let res = await this.$http("/awards", "post", {openid:this.openid}, "")
				console.log(res.data.result);
				// return
				that.lotteryTimes = 0;
				var awards = {};
				awards.id = res.data.result.prize_id
				awards.image = res.data.result.prize_image
				awards.winText = res.data.result.prize_name
				if (typeof(awards) == "undefined") {
					uni.showModal({
						title: '提示',
						content: '当前抽奖次数为0，是否使用10积分兑换一次抽奖机会？',
						success: function(res) {
							if (res.confirm) {
								that.inLottery = false;
								that.lottery(true);
							} else if (res.cancel) {
								that.inLottery = false;
							}
						}
					});
				} else {
					var count = 0;
					// 计算奖品角度
					for (var key in that.awardsList) {
						if (that.awardsList.hasOwnProperty(key)) {
							if (awards.id == that.awardsList[key].id) {
								break;
							}
							count++;
						}
					}
					that.turntable.lottery(count * angel + angel / 2, function() {
						that.inLottery = false;
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: awards.winText,
							success: function(res) {}
						});
					});
				}
				// })
				// .catch(error => {
				// 	var errMsg = "出现异常，请检测网络";
				// 	if (error != null) {
				// 		errMsg = error.message;
				// 	}
				// 	uni.showToast({
				// 		title: errMsg,
				// 		icon: 'none'
				// 	})
				// 	that.inLottery = false;
				// 	return;
				// });
			},
			signIn: function() {},
			mission: function() {},
			integralMall: function() {},
			backClick() {
				uni.navigateBack();
			}
		}

	}
</script>
<style scoped lang="scss">
	.swiper {
		margin-top: 20rpx;
		border: 1px solid #e0a8a8;
		// box-shadow: 0rpx 0rpx 200rpx 20rpx #fff inset;
		border-radius: 20rpx;
		height: 700rpx;
	}

	.swiper-item {
		width: 100%;
		// border: 1px solid #fff;
		overflow: hidden;
		height: 100rpx;
		position: relative;

		// height: 700rpx;
		image {
			margin: 15rpx 0 0 20rpx;
			width: 70rpx;
			height: 70rpx;
		}

		.phone {
			position: absolute;
			left: 150rpx;
			top: 35rpx;
		}

		.jiang {
			position: absolute;
			right: 50rpx;
			top: 30rpx;
		}
	}

	.uni-btn-icon {
		color: #fff;
		font-size: 27px;
		position: absolute;
		top: 2.5vw;
		left: 2vw;
	}

	.title {
		position: relative;
		width: 100%;
		text-align: center;
		/* padding-top:3vw; */
		font-size: 18px;
		color: #fff;
		height: 70rpx;
	}

	.conbox {
		width: 750upx;
		height: 100vh;
		background-color: #FC3459;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.num {
		position: absolute;
		text-align: center;
		left: 0rpx;
		top: 1050rpx;
		width: 750rpx;
		height: 50rpx;
		font-size: 35rpx;
		font-weight: bold;
		color: #feeed4;
		// border: 1px solid red;
	}

	.container,
	image.cont {
		width: 750upx;
		height: auto;
		position: relative;
	}

	image.cont {
		position: absolute;
		z-index: 0;
	}

	image.caidai {
		position: absolute;
		top: 20px;
		left: 0;
		width: 750upx;
		height: 1024upx;
	}

	.header {
		/* height: 246upx; */
		padding-top: 75upx;
		padding-bottom: 40upx;
		box-sizing: border-box;
		position: relative;
		z-index: 3;
	}

	.zi0 {
		position: absolute;
		top: 40rpx;
		left: 250rpx;
		font-size: 100rpx;
		color: #feeed4;
		font-style: italic;
	}

	.zi1 {
		position: absolute;
		top: 135rpx;
		left: 280rpx;
		font-size: 50rpx;
		color: #feeed4;
	}


	.zi2 {
		position: absolute;
		top: 190rpx;
		left: 140rpx;
		font-size: 100rpx;
		color: #feeed4;
		font-family: Microsoft YaHei;
	}

	.popup {
		padding: 30rpx;
		width: 750rpx;
		height: 1250rpx;
		position: relative;

		.image_shut {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			right: 50rpx;
			top: 60rpx;
		}

		.active {
			margin: 20rpx 0 20rpx 20rpx;
			font-size: 40rpx;
		}

		.actives {
			margin: 20rpx 0 20rpx 20rpx;
			font-size: 33rpx;
		}

		.time_title {
			margin: 20rpx 0 20rpx 20rpx;
			font-size: 33rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #010101;
		}

		.time {
			margin: 20rpx 0 20rpx 20rpx;
			font-size: 30rpx;
		}

		.kuang {
			width: 680rpx;
			height: 90rpx;
			position: relative;

			image {
				margin: 15rpx;
				width: 60rpx;
				height: 60rpx;
			}

			.dengji {
				position: absolute;
				left: 100rpx;
				top: 25rpx;
			}

			.neirong {
				position: absolute;
				right: 20rpx;
				top: 25rpx;
			}
		}
	}


	.header .rule {
		padding: 15upx 10upx 15upx 60upx;
		color: #FFFFFF;
		background-color: #FFC000;
		border-radius: 40upx;
		margin-left: -45upx;
		width: 160upx
	}

	.header .info {
		padding: 100upx 30upx 0upx 30upx;
		width: 100%;
		color: #FEE40B;
	}


	.header .times {
		float: left;
		font-size: 35upx;
		font-weight: bold;
	}

	.header .times text {
		color: #FFFFFF;
	}


	.container .my-prize {
		position: absolute;
		left: 0;
		top: 1050rpx;
		float: right;
		font-size: 35upx;
		font-weight: bold;
		color: yellow;
		z-index: 5;
		text {
			color: #FFFFFF;
		}
	}

	// .container .my-prize

	/* 转盘 */
	.canvas-container {
		width: 90%;
		margin: -20rpx 5%;
		position: relative;
	}

	.canvas {
		/* width: 100%!important; */
	}

	#start {
		position: absolute;
		top: calc(50% - 3vw);
		left: 50%;
		width: 18vw;
		height: 29vw;
		margin-left: -9vw;
		margin-top: -15vw;
		cursor: pointer;
	}

	.rule-dialog {
		background-color: transparent !important;
	}

	.rule-container {
		min-height: 300upx;
		display: flex;
		flex-direction: column;
		z-index: 3;
		background-image: linear-gradient(-180deg, #F48549 0%, #F2642E 100%);
		border: 18upx solid #E4431A;
		border-radius: 16px;
		padding: 30upx;
		/* box-sizing: border-box; */
		color: #fff;
	}

	.rule-container .title {
		text-align: center;
		margin-bottom: 36upx;
		font-size: 40upx;
	}

	.rule-container .g_item {
		font-size: 30upx;
		color: #FFFFFF;
		letter-spacing: 0.5px;
		text-align: justify;
		line-height: 20px;
		margin-bottom: 10px;
	}


	.shadowbox {
		width: 750upx;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background: rgba(0, 0, 0, .6);
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.my-prize-dialog {
		width: 600upx;
		min-height: 180upx;
		background: #FFEEDF;
		border: 10upx solid #F2692F;
		color: #333;
		font-size: 24upx;
		font-family: PingFang-SC-Medium;
		border-radius: 40upx;
		padding-bottom: 20upx;
	}

	.my-prize-dialog .title {
		font-family: PingFang-SC-Bold;
		font-size: 16px;
		color: #E4431A;
		letter-spacing: 0.57px;
		display: flex;
		padding: 36upx 0;
		justify-content: center;
	}

	.my-prize-dialog .itembox {
		max-height: 1320upx;
		overflow-y: auto;
	}

	.my-prize-dialog .item {
		width: 100%;
		height: 66upx;
		padding: 0 32upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.my-prize-dialog .no-prize {
		padding: 40upx 0;
	}

	.mission-title {
		width: 90%;
		margin: 10px 5%;
	}

	.title_mission {
		position: absolute;
		top: 20rpx;
		left: 135rpx;
		width: 400rpx;
		height: 62rpx;
		line-height: 62rpx;
		color: #f6373f;
		font-size: 35upx;
		font-weight: bold;
		text-align: center;
		// border: 1px solid red;
		background-color: #fdf3aa;
	}

	.mission-list {
		position: relative;
		z-index: 3;
		text-align: center;
		color: #ffffff;
		width: 90%;
		margin: 150rpx 5% 50upx 5%;
	}

	.mission-list .title {
		margin-top: 10upx;
		background-color: #FD9383;
		border: 1upx solid #FFFFFF;
	}

	.mission-list .title view {
		border-right: 1upx solid #FFFFFF;
		padding: 15upx 10upx;
	}

	.mission-list .title view:nth-child(3) {
		border-right: 0upx solid #FFFFFF;
	}


	.mission-list .mission {
		border: 1upx solid #FFFFFF;
		// border-top: 0upx solid #FFFFFF;
		line-height: 60upx;
		height: 100upx;
	}

	// .mission-list .mission view {
	// 	border-right: 1upx solid #FFFFFF;
	// 	padding: 20upx 10upx;
	// }

	// .mission-list .mission view:nth-child(3) {
	// 	border-right: 0upx solid #FFFFFF;
	// }

	// .mission-list .mission .mission-button {
	// 	width: 100upx;
	// 	height: 50upx;
	// 	line-height: 50upx;
	// 	padding: 5upx 10upx;
	// 	display: inline-block;
	// 	background-color: #FDF3AB;
	// 	color: #FD302D;
	// 	font-size: 30upx;
	// 	border-radius: 8upx;
	// }


	// .mission-list .mission .mission-button.disabled {
	// 	background-color: #BEBEBE;
	// 	color: #FFFFFF;
	// }
</style>
